<!-- 地址选择的组件 -->
<template>
  <div class="my-city">
    <div class="city-list-container">
      <van-index-bar :index-list="indexList">
        <van-index-anchor index="定位">定位城市</van-index-anchor>
        <div class="city-list city-list-inline clearfix">
          <div class="location-city">定位失败，请点击重试</div>
        </div>
        <van-index-anchor index="最近">最近访问的城市</van-index-anchor>
        <div class="city-list city-list-inline clearfix">
          <div class="city-item">北京</div>
          <div class="city-item">上海</div>
          <div class="city-item">广州</div>
        </div>
        <van-index-anchor index="热门">热门城市</van-index-anchor>
        <div class="city-list city-list-inline clearfix">
          <div
            @click="changeCity(item)"
            class="city-item"
            v-for="item in cities.slice(0, 12)"
            :key="item.id"
          >
            {{ item.nm }}
          </div>
        </div>
        <!-- 以字母开头城市的列表开始 -->
        <!-- A B C D  -->
        <section v-for="(cities, key) in cts" :key="key">
          <van-index-anchor :index="key">{{ key }}</van-index-anchor>
          <div
            v-for="city in cities"
            :key="city.id"
            class="city-list city-list-block clearfix"
          >
            <div @click="changeCity(city)" class="city-item" :key="city.id">
              {{ city.nm }}
            </div>
          </div>
        </section>
        <!-- 以字母开头城市的列表结束 -->
      </van-index-bar>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import Vue from "vue";
import { IndexBar, IndexAnchor } from "vant";
import axios from "@/api/instance";
import _ from "lodash";

Vue.use(IndexBar);
Vue.use(IndexAnchor);
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      indexList: ["定位", "最近", "热门"],
      // 后台返回的城市的数据
      cities: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {
    cts() {
      // 1. 对 cities 中的数据进行归类，按照数据名字的首字母进行归类
      const cityObj = _.groupBy(this.cities, (v) => v.py.slice(0, 1));
      return Object.keys(cityObj)
        .sort()
        .reduce((obj, key) => {
          // key => a b c d obj {} {A:[...]}
          const upperKey = key.toUpperCase(); // A B C D...
          this.indexList.push(upperKey);
          // obj["A"] = cityObj[key]
          // obj[upperKey] = cityObj[key]
          obj[upperKey] = cityObj[key];
          console.log(obj);
          return obj;
        }, {});
      // return cityObj;
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    changeCity(city) {
      console.log(city);
      localStorage.setItem("cityId", city.id);
      localStorage.setItem("cityName", city.nm);
      // this.$router this.$route
      // this.$router.back();
      this.$router.push("/home/theaters");
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    const result = await axios.get("/cities.json");
    // console.log(result);
    this.cities = result.cts;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
@import url("@/assets/border.less");
.my-city {
  position: absolute;
  height: 100%;
  width: 100%;
  .city-list-container {
    position: absolute;
    z-index: 1000;
    background-color: #ebebeb;
    font-size: 0.14rem;
    color: #333;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    .city-list {
      padding-right: 30px;
    }
    .city-list-inline {
      background-color: #f5f5f5;
      padding-bottom: 8px;
    }
    .city-list-block {
      background-color: #f5f5f5;
    }
    .city-list-inline .location-city,
    .city-list-inline .city-item {
      float: left;
      background-color: #fff;
      width: 29%;
      box-sizing: border-box;
      height: 0.33rem;
      margin-top: 15px;
      margin-left: 4%;
      padding: 0 4px;
      border: 1px solid #e6e6e6;
      border-radius: 3px;
      line-height: 0.33rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .clearfix::after {
      content: " ";
      display: table;
      clear: both;
    }
    .city-list-block .city-item {
      height: 0.45rem;
      line-height: 0.45rem;
      margin-left: 0.15rem;
      .border-1px(0 0 1px 0);
    }
    .city-list-block .city-item:last-child {
      border-bottom: none;
    }
  }
}
</style>
